<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '报修',
  },
}
</route>

<template>
  <view class="repair-page">
    <!-- 设施信息展示 -->
    <wd-cell-group title="设施信息" border>
      <wd-cell title="设施名称" :value="repairInfo.facilityName" />
      <wd-cell title="设施地址" :value="repairInfo.facilityAddress" />
    </wd-cell-group>

    <!-- 报修信息填写 -->
    <wd-cell-group title="报修信息" border custom-class="mt-3">
      <!-- 故障描述 -->
      <wd-textarea
        v-model="formData.description"
        label="故障描述"
        placeholder="请详细描述设施的故障情况"
        show-word-limit
      />

      <!-- 图片上传 -->
      <wd-cell title="故障图片">
        <wd-upload
          v-model="formData.imageList"
          :limit="1"
          :file-list="formData.imageList"
          @change="handleImageChange"
          :action="action"
        />
      </wd-cell>
    </wd-cell-group>

    <!-- 提交按钮 -->
    <view class="submit-btn">
      <wd-button type="primary" block @click="confirm" :loading="submitting">提交报修</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { submitRepair } from '@/service/repair'
import { useMessage } from 'wot-design-uni'
const message = useMessage()

// 接收路由参数
const repairInfo = ref<{
  facilityId: string
  facilityName: string
  facilityAddress: string
}>({
  facilityId: '',
  facilityName: '',
  facilityAddress: '',
})

// 表单数据
const formData = ref({
  description: '',
  imageList: [] as any[],
  image: undefined, // 用于提交的图片路径
})

// 提交状态
const submitting = ref(false)

const action = ref('http://localhost:8080/api/file/upload')

// 处理图片上传
const handleImageChange = (event: any) => {
  const { fileList } = event
  formData.value.imageList = fileList
  const jsonString = fileList[0].response
  const jsonObj = JSON.parse(jsonString)
  console.log(jsonObj)
  if (fileList.length > 0) {
    formData.value.image = jsonObj.data // 直接使用文件对象
  } else {
    formData.value.image = undefined // 使用 undefined 表示没有文件
  }
}

function confirm() {
  message
    .confirm({
      msg: '请确保报修信息真实有效，虚假报修将承担相应法律责任。是否确认提交？',
      title: '重要提示',
    })
    .then(() => {
      handleSubmit()
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}

// 表单提交
const handleSubmit = async () => {
  // 表单验证
  if (!formData.value.description.trim()) {
    uni.showToast({
      title: '请填写故障描述',
      icon: 'none',
    })
    return
  }

  if (!formData.value.image) {
    uni.showToast({
      title: '请上传故障图片',
      icon: 'none',
    })
    return
  }

  try {
    submitting.value = true
    await submitRepair({
      facilityId: Number(repairInfo.value.facilityId),
      description: formData.value.description,
      imageUrl: formData.value.image,
    })

    uni.showToast({
      title: '报修成功',
      icon: 'success',
    })

    // 延迟返回上一页
    setTimeout(() => {
      // 使用重定向而不是返回
      uni.redirectTo({
        url: '/pages/map/index',
      })
    }, 1500)
  } catch (error) {
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'error',
    })
  } finally {
    submitting.value = false
  }
}

// 页面加载时获取路由参数
onLoad((options: any) => {
  repairInfo.value = options
})
</script>

<style lang="scss" scoped>
.repair-page {
  min-height: 100vh;
  padding: 12px;
  background-color: #f5f5f5;
}

.submit-btn {
  padding: 0 16px;
  margin-top: 24px;
}

:deep(.wd-cell-group) {
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 8px;
}

:deep(.wd-textarea) {
  padding: 12px 16px;
}

:deep(.wd-upload) {
  padding: 12px 0;
}
</style>
